<template>
  <div class="contain">
    <el-card>

      <div class="top">
        <el-button type="primary" @click="showDialog=true">添加客户</el-button>
        <div class="top_right">
          <el-select v-model="agent" placeholder="全部经纪">
            <el-option
              v-for="item in agentIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-input
            v-model="name_contains"
            placeholder="请输入客户名"
            class="input-with-select"
            @keyup.enter.native="searchFn"
          >
            <el-button slot="append" icon="el-icon-search" @click="searchFn" />
          </el-input>
        </div>
      </div>

      <el-table :data="customerList" border style="width: 100%">
        <el-table-column prop="image" label="图片" width="120">
          <template v-slot="{ row }">
            <el-image :src="row.image" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="agent" label="经纪">
          <template v-slot="{row}">
            {{ row.agent&& row.agent.name }}
          </template>
        </el-table-column>
        <el-table-column prop="wechat" label="微信" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="操作" width="180">
          <template v-slot="{row}">
            <el-button type="primary" @click="editCategories(row.id)">编辑</el-button>
            <el-button type="danger" @click="delCategories(row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="params._limit"
        :current-page="currentPage"
        @current-change="currentChange"
      />
    </el-card>

    <addDialog
      ref="addDialog"
      :show-dialog.sync="showDialog"
      :agent-id-list="agentIdList"
      @getCustomers="getCustomers"
    />
  </div>
</template>

<script>
import { getCustomers, getAgents, delClients, getCount } from '@/api/customer'
import addDialog from './component/addDialog.vue'
export default {
  components: {
    addDialog
  },
  data() {
    return {
      agentIdList: [],
      customerList: [],
      params: {
        _limit: 3,
        _start: 0
      },
      agent: '',
      name_contains: '',
      showDialog: false,
      total: 0,
      currentPage: 1

    }
  },
  async created() {
    this.getCustomers()
    this.getCount()
    const { data } = await getAgents()
    this.agentIdList = data
  },
  methods: {
    async getCount() {
      if (this.agent || this.name_contains) {
        const agent = this.agent ? { agent: this.agent } : {}
        const name_contains = this.name_contains ? { name_contains: this.name_contains } : {}
        const res = await getCount({
          ...agent,
          ...name_contains
        })
        this.total = res.data
        return
      }
      const res = await getCount()
      this.total = res.data
    },
    async getCustomers(type) {
      // 如果新增时，跳到最后一页
      if (type === 'add') {
        await this.getCount()
        const pageCount = parseInt(this.total / this.params._limit)
        console.log('pag:', pageCount)
        this.currentChange(pageCount + 1)
      } else {
        const res = await getCustomers(this.params)
        this.customerList = res.data
      }
    },
    searchFn() {
      this.params = {
        _limit: 2,
        _start: 0
      }
      const agent = this.agent ? { agent: this.agent } : {}
      const name_contains = this.name_contains ? { name_contains: this.name_contains } : {}

      if (this.agent || this.name_contains) {
        this.params = {
          ...this.params,
          ...agent,
          ...name_contains
        }
      }

      this.getCustomers()
    },
    async currentChange(index) {
      this.params._start = this.params._limit * (index - 1)
      await this.getCustomers()
      this.currentPage = index
      console.log(147, this.currentPage)
      await this.getCount()
      console.log(149, this.currentPage)
    },
    editCategories(id) {
      this.showDialog = true
      this.$refs.addDialog.getCustomerById(id)
    },
    async delCategories(id) {
      try {
        await this.$confirm('确定删除？')
        await delClients(id)

        await this.getCount()
        if (this.total >= this.params._limit && this.total % this.params._limit === 0) {
          this.currentChange(this.currentPage - 1)
        }

        this.getCustomers()
        this.$message.success('操作成功')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contain{
  padding: 10px;
   .top {
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ddd;
    .input-with-select {
      width: 500px;
    }
  }
}
</style>
